<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 新增设备
async function newDriver() {
  try {
    const filters = []
    const driver = await (navigator as any).hid.requestDevice({ filters })
    console.log('driver', driver)
  } catch (error) {
    console.log(error)
  }
}

// 获取已经配对的设备列表
async function getDrivers() {
  try {
    const drivers = await (navigator as any).hid.getDevices()
    console.log('drivers', drivers)
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  getDrivers()
})
</script>

<template>
  <div class="select_driver w-full h-full flex items-center justify-center gap-20px">
    <!-- 新增设备 -->
    <el-card class="select_driver_item" shadow="always" @click="newDriver">
      <el-icon size="70px"><Plus /></el-icon>
      <div class="text-align-center mt-15px">{{ t('SelectDriver.Add') }}</div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.select_driver_item {
  width: 220px;
  height: 220px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:hover {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
  }
}
</style>
